<template>
	<view class="content">
		<u-navbar :border-bottom="true"
				:is-back="true" 
				:title="navBarTitle" 
				title-color="#000000" 
				title-bold  :title-size="36"
				 :height="44">
			<view slot="right" class="u-p-r-30" v-if="memberList.length>0">
				<u-button v-if="selectedUser.size>0" type="success" size="mini" @click="showConfirmModel()">
				  <text class="u-font-30">完成({{selectedUser.size}})</text>
				</u-button>
				<u-button v-else  size="mini" disabled  :custom-style="customSendBtnStyle">完成</u-button>
			</view>
		</u-navbar>
		<view  v-if="memberList&&memberList.length>0" style="width: 100%;">
			<view v-for="(member,index) in memberList" :key="index" class="list-cell u-border-bottom">
				<view v-if="optionType==0">
					<!-- :disabled="member.isChecked" -->
					<u-checkbox shape="circle" active-color="#19BE6B"
								@change="checkBoxChange"
								v-model="member.isChecked" 
								:name="member.friendId"
								:key="member.friendId">
					</u-checkbox>
				</view>
				<view v-if="optionType==1">
					<u-checkbox shape="circle" active-color="#19BE6B"
								@change="checkBoxChange"
								v-model="member.isChecked" 
								:name="member.userId"
								:disabled="member.userId==vuex_userInfo.id"
								:key="member.userId">
					</u-checkbox>
				</view>
				<view>
					<u-image :src="member.headImg"  mode="aspectFill" width="80" height="80" border-radius="12">
						<view slot="error" 
							class="u-flex u-row-center u-col-center"
							style="width: 80rpx;height: 80rpx;background-color: #f0f0f0;border-radius: 12rpx;">
							<u-image src="/static/image/default/default-user/default-user.png"  
							mode="aspectFill" width="50" height="50">
							</u-image>
						</view>
					</u-image>
				</view>
				<view  class="list-cell-name">{{member.friendName?member.friendName:member.userName}}</view>
			</view>
		</view>
		<view v-else style="padding-top: 30%;">
			 <u-empty  text="暂无可选人员"></u-empty>
		</view>
		<view>
			<!-- 群名称输入框 -->
			<u-modal v-model="confirmModelShow" 
				:show-cancel-button="true" @cancel="confirmModelShow=false"
				@confirm="confirmOption"  :title="confirmModelTitle" :content="confrimModelContent" negative-top="200">
			</u-modal>
		</view>
		
	</view>
</template>

<script>
import searchInput from '@/components/searchInput/index.vue';
export default {
	components:{searchInput},
	data() {
		return {
			navbarTitle:'',
			customSendBtnStyle: { //发送按钮的自定义样式
				backgroundColor:'#AEAEB2',
				color:'#ffffff',
				fontSize:'30rpx'
			},
			chatGroupId:'',
			optionType:0,  // 0添加成员  1删除成员
			memberList:[],
			selectedUser:new Set(),
			currentUserId:'',
			confirmModelShow:false,
			chatGroupName:'',
			confirmModelTitle:'',
			confrimModelContent:'',
		};
	},
	
	onLoad:function(option){
		let that=this;
		console.log("页面初始化参数",option);
		let userId= that.vuex_userInfo.id;
		that.currentUserId=userId;
		let type= option.optionType;
		let chatGroupId= option.chatGroupId;
		that.optionType=type;
		that.chatGroupId=chatGroupId;
		this.navBarTitle="添加成员";
		if(type==1){
			this.navBarTitle="删除成员"
		}
		that.initData();//获取通讯录好友
	},
	
	methods: {
		initData:function(){
		    let that=this;
			if(that.optionType==0){
				that.getMyFriendListForAdd();
			}else{
				that.getMyFriendListForDel();
			}   
		},
		
		//初始化通讯录列表
		getMyFriendListForAdd:function(){
		   let that=this;
		   let param={
			   chatGroupId:that.chatGroupId,
		   };
		    that.$u.api.imUser.getMyFriendListForAdd(param).then(res => {
				if(res.code==200){
					console.log("新增成员可选择列表",res);
					that.memberList=res.data;
				}
			})	   
		},
		//群成员
		getMyFriendListForDel:function(){
			let that=this;
			let param={
				chatGroupId:that.chatGroupId,
			};
			 that.$u.api.imUser.getMyFriendListForDel(param).then(res => {
				if(res.code==200){
					//console.log("群成员列表",res);
					that.memberList=res.data;
				}
			})	  
		},
		
	    //监听选中人员
		checkBoxChange:function(e){
			if(this.optionType==0){
				let friendId= e.name;
				let isChecked=e.value;
				if(isChecked){
					this.selectedUser.add(friendId);
				}else{
					if(this.selectedUser.has(friendId)==true){
						this.selectedUser.delete(friendId);
					} 
				}
			}
			else{
				let friendId= e.name;
				let isChecked=e.value;
				if(isChecked){
					this.selectedUser.add(friendId);
				}else{
					if(this.selectedUser.has(friendId)==true){
						this.selectedUser.delete(friendId);
					} 
				}
			}
		},
		
		showConfirmModel:function(){
			let that=this;
			if(that.selectedUser.size<1){
				console.log("没有选中人员");
				return;
			}else{
				if(that.optionType==0){
					that.confirmModelTitle="添加成员";
					that.confrimModelContent="确认添加选中人员到群组吗?";
				}else{
					that.confirmModelTitle="删除成员";
					that.confrimModelContent="确认从群聊中剔除选中人员吗?";
				}
				that.confirmModelShow=true;
				
			}
		},
	
		//确认
		confirmOption:function(){
			let that=this;
			let selectedFriends=[];
			that.selectedUser.forEach((item) => {
			  selectedFriends.push(item);
			})
			let param={
				chatGroupId:that.chatGroupId,
				members:selectedFriends,
				currentUserId:that.currentUserId
			};
			let memberNames=[];
			//添加
			if(that.optionType==0){
				that.memberList.forEach(function(member){
					let mId=member.friendId;
					let userName=member.userName;
					if(selectedFriends.indexOf(mId)!=-1){
						memberNames.push(userName);
					}
				})
				param.memberNames=memberNames;
				console.log("提交操作的参数",param);
				let sendTextStr="管理员邀请了"+memberNames.length+"位群成员:["+memberNames.join(",")+"]";
				console.log("sendStr",sendTextStr);
				that.$u.api.chatGroup.addMemberForGroup(param).then(res => {
					if(res.code==200){
						let timestamp = new Date().getTime();
						let message = {
							"id": timestamp + "",
							"chatGroupId": that.chatGroupId,
							"userId": that.vuex_userInfo.id,
							"meFlag": true,
							"userName": that.vuex_userInfo.userName,
							"userAvatar": that.vuex_userInfo.avatar ? that.vuex_userInfo.avatar :
								"/static/image/default/default-user/default-user.png",
							'messageType': that.messageApi.MSG_TYPE.SYSTEM_MSG,
							"contentType":  that.messageApi.CONTENT_TYPE.TEXT_CONTENT_TYPE,
							"content": {
								'text':sendTextStr,
								'sysMsgType':that.messageApi.SYS_MSG_TYPE.joinGroupMember,
								'params':param
							},
							"createTime": that.globalUtil.getTimeStr(timestamp),
							"timestamp": timestamp,
							"platFrom": 1,
							"showTimeFlag": true,
						};
						this.globalWX.sendMessage(message, {
							complete: function(res) {
								if (res == true) {
									that.selectedUser.clear();
									uni.$emit("groupInfoListener",param);
									uni.navigateBack();
								} else {
									that.globalUtil.utilAlert("网络故障，稍后重试！");
									return;
								}
							}
						},that.messageApi.BUSINESS_CODE.chatting);
					}	
				})
			}
			//删除
			if(that.optionType==1){
				that.memberList.forEach(function(member){
					let mId= member.userId;
					let userName=member.userName;
					if(selectedFriends.indexOf(mId)!=-1){
						memberNames.push(userName);
					}
				})
				param.memberNames=memberNames;
				console.log("提交操作的参数",param);
				let sendTextStr="管理员剔除了"+memberNames.length+"位群成员:["+memberNames.join(",")+"]";
				console.log("sendStr",sendTextStr);
				that.$u.api.chatGroup.deleteMemberForGroup(param).then(res => {
					if (res.code == 200) {
						let timestamp = new Date().getTime();
						let message = {
							"id": timestamp + "",
							"chatGroupId": that.chatGroupId,
							"userId": that.vuex_userInfo.id,
							"meFlag": true,
							"userName": that.vuex_userInfo.userName,
							"userAvatar": that.vuex_userInfo.avatar ? that.vuex_userInfo.avatar :
								"/static/image/default/default-user/default-user.png",
							'messageType': that.messageApi.MSG_TYPE.SYSTEM_MSG,
							"contentType":  that.messageApi.CONTENT_TYPE.TEXT_CONTENT_TYPE,
							"content": {
								'text':sendTextStr,
								'sysMsgType':that.messageApi.SYS_MSG_TYPE.deleteGroupMember,
								'params':param
							},
							"createTime": that.globalUtil.getTimeStr(timestamp),
							"timestamp": timestamp,
							"platFrom": 1,
							"showTimeFlag": true,
						};
						this.globalWX.sendMessage(message, {
							complete: function(res) {
								if (res == true) {
									that.selectedUser.clear();
									uni.$emit("groupInfoListener",param);
									uni.navigateBack();
								} else {
									that.globalUtil.utilAlert("网络故障，稍后重试！");
									return;
								}
							}
						},that.messageApi.BUSINESS_CODE.chatting);
					}else {
						that.globalUtil.utilAlert("剔除群成员触发异常");
						return;
					}
				})
			}
		},
	}
	
};
</script>

<style lang="scss" scoped>
.content {
	height: 100%;
	.slot-wrap {
		display: flex;
		align-items: center;
		padding: 0 30rpx; 
	}
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 28rpx;
		line-height: 48rpx;
		background-color: #fff;
		align-items: center;
		image {
			width: 76rpx;
			height: 76rpx;
			border-radius: 12rpx;
			flex: 0 0 76rpx;
		}
		&-name{
			padding-left: 20rpx;
		}
	}
}
</style>
